<template>
	<view>
		<view class="input-item">
			<view class="title">问卷标题</view>
			<view class="input-content">
				<input class="text-input" type="text" placeholder="请输入问卷标题" v-model="data.name" />
			</view>
		</view>
		<view class="textarea">
			<textarea placeholder="请输入问卷简介" v-model="data.con" />
			</view>
		<view class="content">
			<view class="content-title">题目
				<text class="iconfont addQ" @click="clear">&#xe630;</text>
				<!-- <text class="iconfont addQ" @click="addQuestion">&#xe6ad;</text> -->
			</view>
			<view class="question-item" v-for="(question,i) in data.question" :key="i">
				<view class="question-title">
					<text>{{i+1}}、{{question.questionTitle}}</text>
					<text class="operation-icon" @click="editQuestion(i)">&#xe807;</text>
					<text class="operation-icon" @click="delQuestion(i)">&#xe6b0;</text>
					<text class="operation-icon" @click="addOption(i)">&#xe6ad;</text>
				</view>
				<view class="question-option" v-for="(option,j) in question.optionItems" :key="j">
					<view class="question-option-item">
						<text class="radio-icon">&#xe61c;</text>{{option}}
						<text class="operation-icon" @click="editOption(i,j)">&#xe807;</text>
						<text class="operation-icon" @click="delOption(i,j)">&#xe6b0;</text>
						<text class="operation-icon" v-if="j!=0" @click="moveOption(i,j,-1)">&#xe7f1;</text>
						<text class="operation-icon" v-if="j!=question.optionItems.length-1" @click="moveOption(i,j,1)">&#xe7f2;</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="iconfont" @click="addQuestion">&#xe6f7;</view>
			<view class="iconfont" @click="preview">&#xe6d1;</view>
			<view class="iconfont" @click="save">&#xe64f;</view>
			<view class="iconfont" @click="submit">&#xe65e;</view>
		</view>
		
		<uni-popup ref="questionDialog" type="dialog">
			<uni-popup-dialog mode="input" title="输入内容" :value="questionPlaceholder" placeholder="请输入内容" @confirm="questionConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="optionDialog" type="dialog">
			<uni-popup-dialog mode="input" title="输入内容" :value="optionPlaceholder" placeholder="请输入内容" @confirm="optionConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopupDialog,
		},
		data() {
			return {
				// data:{
				// 	name:'问卷名',
				// 	con:'问卷简介',
				// 	question:[
				// 		{questionTitle:'您的性别是',optionItems:['男','女']},
				// 		{questionTitle:'您的年龄是',optionItems:['18以下','18-25','25-35','35以上']},
				// 		{questionTitle:'您经常浏览哪些社交网站',optionItems:['QQ、微信','新浪微博','百度贴吧','人人、豆瓣、天涯']},
				// 	]
				// },
				data:{
					name:'',
					con:'',
					question:[]
				},
				questionPlaceholder:'',
				currentQuestion:0,
				optionPlaceholder: '',
				currentOption:0
			}
		},
		methods: {
			clear(){
				uni.showModal({
					content:'您确定清空问卷？',
					success:res=> {
						if(res.confirm){
							uni.setStorage({
							    key: 'questionnaire',
							    data: '',
							})
							this.data = {
								name:'',
								con:'',
								question:[]
							}
						}
					}
				})
			},
			addQuestion(){
				this.data.question.push(
					{questionTitle:'请输入您的问题',optionItems:['选项一','选项二']},
				)
			},
			delQuestion(i){
				this.data.question.splice(i, 1)
			},
			editQuestion(i){
				this.currentQuestion = i // 待修改的问题
				this.questionPlaceholder = this.data.question[i].questionTitle
				this.$refs.questionDialog.open()
			},
			addOption(i){
				this.data.question[i].optionItems.push('新增选项')
			},
			delOption(i,j){
				if(this.data.question[i].optionItems.length==2){
					uni.showModal({
						content:'选项不得少于两个'
					})
					return
				}
				this.data.question[i].optionItems.splice(j,1)
			},
			moveOption(i,j,k){
				let tmp = this.data.question[i].optionItems[j]
				if(k == -1){//向上移
					this.data.question[i].optionItems.splice(j-1,0,tmp)
					this.data.question[i].optionItems.splice(j+1,1)
				}
				else{//向下移
					this.data.question[i].optionItems.splice(j+2,0,tmp)
					this.data.question[i].optionItems.splice(j,1)
				}
			},
			editOption(i,j){
				this.currentQuestion = i // 待修改的问题
				this.currentOption = j // 待修改的选项
				this.optionPlaceholder = this.data.question[i].optionItems[j]
				this.$refs.optionDialog.open()
			},
			questionConfirm(done, val) {
				this.data.question[this.currentQuestion].questionTitle = val
				done()
			},
			optionConfirm(done, val){
				this.data.question[this.currentQuestion].optionItems.splice(this.currentOption,1,val)
				done()
			},
			addMember(){
				uni.navigateTo({
					url:'./addMember?name='+this.data.name+'&con='+this.data.con
				})
			},
			preview(){
				this.save()
				uni.navigateTo({
					url:'./questionnairePerview'
				})
			},
			save(){
				uni.setStorage({
				    key: 'questionnaire',
				    data: JSON.stringify(this.data),
				})
				uni.showModal({
					content:'已保存'
				})
			},
			submit(){
				uni.setStorage({
				    key: 'questionnaire',
				    data: JSON.stringify(this.data),
				})
				this.addMember()
			}
		},
		onLoad() {
			let data = uni.getStorageSync('questionnaire')
			if(data){
				data = JSON.parse(data)
				this.data=data
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFAEE;
		/* background-image: linear-gradient(#FFFAEE, #ffe0c5); */
		font-family: 'Courier New', Courier, monospace;
		padding-bottom: 30px;
	}
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.input-item {
		height: auto;
		position: relative;
		height: 40px;
		margin: 0 5px;
		border-bottom: 1px solid #C0C0C0;
	}

	.input-item .title {
		position: absolute;
		top: 0;
		left: 0;
		width: 30%;
		height: 100%;
		text-align: center;
		line-height: 40px;
	}

	.input-item .input-content {
		position: absolute;
		top: 0;
		right: 0;
		width: 70%;
		height: 100%;
	}

	.input-item .input-content .text-input {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.textarea{
		margin-top: 15px;
		padding: 0 10px;
		height: 150px;
	}
	.textarea textarea{
		width: 95%;
		border-radius: 10px;
		border: 1px solid #808080;
		margin: 0 2.5%;
		padding: 0 0 0 10px;
	}
	
	.content{
		margin: 10px;
		padding: 10px;
	}
	
	.content .content-title{
		padding-bottom: 10px;
		border-bottom: 1px solid #C0C0C0;
	}
	
	.question-item{
		margin: 10px 0;
		border-bottom: 1px solid #C0C0C0;
	}
	.question-option, .question-option-item{
		margin: 10px 0;
	}
	.addQ{
		float: right;
		color: #c2c2c2;
		font-size: 25px;
	}
	
	.operation-icon{
		font-family: "iconfont" !important;
		font-size: 20px;
		color: #c2c2c2;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 0 10px;
	}
	
	.radio-icon{
		font-family: "iconfont" !important;
		font-size: 20px;
		color: #666666;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 10px;
	}
	
	.footer {
		text-align: center;
		margin-bottom: 50px;
	}
	
	.footer view.iconfont{
		/* border: 1px solid red; */
		display: inline-block;
		height: 30px;
		width: 30px;
		line-height: 30px;
		font-size: 30px;
		border-radius: 50%;
		padding: 10px;
		background-color: #007AFF;
		color: #FFFFFF;
		margin: 10px;
		box-shadow: 5px 5px 5px #bdbdbd;
	} 
	
</style>
